<template>
  <div class="review-bar">
    <div class="review-bar-chart">
      <VptBar
        :chartType="chartType"
        :width="width"
        :height="height"
        :chartData="list"
        autoRander
        :xAxisData="xData"
        v-bind="barProps"
        :barWidth="20"
        :showLegend="true"
        :color="colorList"
      ></VptBar>
    </div>
  </div>
</template>

<script setup>
import VptBar from "./vpt-bar.vue";
import { fontSize } from "@/utils/rem/rem.js";
import { color } from "echarts";
import { computed, reactive } from "vue";

const colorList = reactive(["#2175DB", "#EDC600"]);

const props = defineProps({
  chartType: { type: String, default: "init" },
  workOrderData: { type: Array, default: () => [] },
  barData: { type: Array, default: () => [] },
  // 是否为横屏
  isLandscape: { type: Boolean, default: false },
  width: { type: String, default: "8.91rem" },
  height: { type: String, default: "1.6rem" },
    noDataStyle: { type: Object, default: () => ({}) },
});

const list = computed(() => {
  let result = [];
  if (props.workOrderData.length === 0) {
    return result;
  }
  let incompleteList = [
    ...props.workOrderData.map((item) => item.data.incomplete),
  ];
  result.push(incompleteList);
  let completedList = [
    ...props.workOrderData.map((item) => item.data.completed),
  ];
  result.push(completedList);
  return result;
});

const xData = computed(() => {
  return props.workOrderData.map((item) => item.name);
});

const barProps = computed(() => {
  return {
    titleProps: {
      text: "",
    },
    yAxisProps: {
      nameTextStyle: {
        fontSize: fontSize(14),
        color: "rgba(255,255,255, 0.5)",
        // fontFamily: "HarmonyOS_Sans",
        fontWeight: 400,
      },
    },
    legend: {
      selectedMode: true,
    },
    grid: {
      left: fontSize(3),
      // top: '15%',
      top: fontSize(35),
      bottom: fontSize(20),
    },
    color: ["#165DFF"],
    dataZoom: {
      show: true,
      endValue: 5,
    },
    // ...otherProps
  };
});

const getOtherBarProps = () => {
  return {
    grid: {
      left: fontSize(5),
      top: fontSize(40),
      bottom: fontSize(20),
    },
    titleFontSize: 14,
    xAxisLabelFontSize: 14,
    yAxisLabelFontSize: 14,
    barWidth: 20,
  };
};
</script>

<style lang="less" scoped>
.review-bar {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;

  .review-bar-chart {
    flex: 1;
    height: 0;
  }
   .vpt-plan-value {
    padding-top: 0.2rem;
    font-size: 0.16rem;
    text-align: center;
    // color: #ffffffb3;
  }
}
</style>
